<script>
export default {
  data() {
    return {
      loginForm: {
        username:'',
        password:''
      },

      shuliang: {
        count:10
      }

    }
  },
  methods: {
    validate() {
      if (this.loginForm.username == "zhangsan" && this.loginForm.password == "123") {
        alert('登录成功');
      } else {
        alert("Invalid username or password. Please try again.");
      }
    },
    decrement() {
        this.shuliang.count  = this.shuliang.count-1;
      },
    increment() {
       this.shuliang.count  = this.shuliang.count+1;
      }
  },
}
</script>

<template>
<h2>1.practice 2</h2>
 <form>
    <label>Username:</label>
    <input type="text" id="username" name="username" v-model="loginForm.username">
    <br>
    <br>
    <label>
      Password:
    </label>
    <input type="password" id="password" name="password" v-model="loginForm.password">
    <br>
    <br>
    <input type="submit" value="Submit" @click="validate">
  </form>

<h2>2.challenge 2</h2>
 <button @click="decrement">-</button>
    <input type="number" v-model="shuliang.count">
  <button @click="increment">+</button>

  
</template>